<template>
    <div class="jianzhan-content">
        <Crumb name="System Customer"/>
        <div class="content">
            <el-button @click="openDialog" icon="el-icon-plus" size="small" type="primary">Add Customer</el-button>
            <div class="table-wrapper">
                <el-table
                        :data="customerList.slice((pageNum-1)*pageSize,pageNum*pageSize)"
                        row-key="id"
                        border
                        stripe
                >
                    <el-table-column label="Customer Name" prop="customerName"/>
                    <el-table-column width="300">
                        <template slot-scope="customer">
                            <el-button icon="el-icon-edit" size="small" type="primary" @click="editDialog(customer.row)">Edit</el-button>
                            <el-button icon="el-icon-edit" size="small" type="warning" @click="openEmployee(customer.row)">Employee</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination background
                                   :page-size="pageSize"
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"></el-pagination>
                </div>
            </div>
        </div>
        <el-dialog :visible.sync="dialogVisible" title="customer">
            <el-form label-width="150px" ref="customer" :model="customer" :rules="rule">
                <el-form-item label="Customer" required prop="customerName">
                    <el-input size="small" v-model="customer.customerName"/>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">Cancel</el-button>
                        <el-button type="primary" @click="submitForm">Confirm</el-button>
                    </span>
        </el-dialog>
        <el-dialog
                title="Employee"
                :visible.sync="dialogVisible1"
                top="0"
                width="100%"
                >
                <spec-customer  :customerId="customerId"/>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible1 = false">ok</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import Crumb from '../../components/common/crumb'
    import mixins from '../../util/mixins'
    import {ERROR_OK} from "../../util/config";
    import specCustomer from './specCustomer'
    import {getSpecCustomer,addSpecCustomer,modSpecCustomer} from "../../api/customer";

    export default {
        name: "customer",
        mixins:[mixins],
        data(){
            return {
                list:[],
                key:'',
                status:0,
                customerList:[],
                dialogVisible:false,
                dialogVisible1:false,
                dialogVisible2:false,
                rule:{
                    customerName:[{required:true}]
                },
                employeeList:[],
                customerId:'',
                customer:{customerName:'',id:''},
            }
        },
        created(){
            this.getSpecCustomer()
        },

        methods:{
            submitForm(){
                this.$refs.customer.validate(async valid=>{
                    if (valid) {
                        const {id,customerName} = this.customer;
                        if(id) {
                            const {status} = await modSpecCustomer({id,customerName});
                            if(status === ERROR_OK) {
                                this.$notify.success('Modify Success');
                            }
                        } else {
                            const {status,msg} = await addSpecCustomer({customerName});
                            if(status === ERROR_OK) {
                                this.$notify.success('Add Success');
                                this.getSpecCustomer();
                            } else {
                                this.$notify.error(msg)
                            }
                        }
                        this.dialogVisible = false;
                    }
                })
            },
            async getSpecCustomer(){
                const {status,data} = await getSpecCustomer();
                if(status === 0 ) {
                    this.customerList = data;
                }
            },
            async openEmployee(customer){
                this.customerId = customer.id;
                this.dialogVisible1 = true;
            },
            openDialog(){
                this.customer = {customerName:'',id:''};
                this.dialogVisible =true;
            },
            editDialog(customer) {
                this.customer = customer;
                this.dialogVisible = true
            }
        },
        components:{
            Crumb,specCustomer
        }
    }
</script>

<style scoped lang="scss">
    @import '../../css/mixins';
    .content{
        @include content
    }
</style>